*{
    box-sizing:border-box;
}
body{
    color:#331;
    font-size:16px;
    margin:0;
    padding:0;
}
.background-container {
    position: fixed; /* 固定背景，不随内容滚动 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* 背景图片覆盖整个容器 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    z-index: -1; /* 确保背景在最底层 */
    opacity: 0.8;
}

/* 定义背景切换动画 */
@keyframes backgroundChange {
    0% {
        background-image: url('@/assets/back_pic/Rome_Huns.png');
    }
    22% {
        background-image: url('@/assets/back_pic/Islamic.png');
    }
    40% {
        background-image: url('@/assets/back_pic/Crusades.png');
    }
    60% {
        background-image: url('@/assets/back_pic/100war.png');
    }
    80%{
        background-image: url('@/assets/back_pic/muhanmude2.png');
    }
    100%{
        background-image: url('@/assets/back_pic/rosewar.png');
    }
}

/* 应用动画到背景容器 */
.background-container {
    animation: backgroundChange 15s infinite;
}